import React, { useEffect, useRef, useState, useMemo } from 'react';
import { SchemaManage } from '@/components/SchemaComponent';
import { connect } from 'umi';
import { AssetacquisitionManageAPI } from '../common/type';
import { AssetacquisitionTabSwitch, getTableColumns } from '../mconfig';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { MaterialManageServices } from '../services';
import UpdataMaterialModal from './UpdataModal';

const AssetAcquisitionManageView: React.FC<AssetacquisitionManageAPI.IMaterialManageView> = ({ curRes }) => {
  const schemaExpertsManageRef: any = useRef();

  const array = [
    {
      statisticalTime: '2023-10-25',
      assetCompanyName: '怀柔实验室',
      assetDepartmentName: ' 综合管理办公室',
      assetType: '房屋',
      statisticalPrice: '190034',
    },
    {
      statisticalTime: '2023-10-25',
      assetCompanyName: '怀柔实验室',
      assetDepartmentName: '科技创新部',
      assetType: '土地',
      statisticalPrice: '87334',
    },
    {
      statisticalTime: '2023-10-25',
      assetCompanyName: '怀柔实验室',
      assetDepartmentName: '财务资产部',
      assetType: '车辆',
      statisticalPrice: '43123',
    },
  ];

  /**管理页services*/
  const { data, loading, searchList, pagination, reloadRequest, manageTableParams } = MaterialManageServices(curRes);

  /**管理页的ref*/
  const MaterialManageViewRef: any = useRef();

  /**新增弹窗的显示*/
  const [isShowAddModal, setIsShowAddModal] = useState({
    isShow: false,
    recordObj: {},
    clickType: '',
  });

  /**是否显示详情抽屉*/
  const [isShowDetail, setIsShowDetail] = useState<Record<string, any>>({
    isShow: false,
    recordObj: {},
  });

  /**是否显示作废弹窗*/
  const [isShowCancelModal, setIsShowCancelModal] = useState<Record<string, any>>({
    isShow: false,
    recordObj: {},
  });

  /**发布，申请弹窗*/
  const [isShowApplyModal, setIsShowApplyModal] = useState<Record<string, any>>({
    isShow: false,
    recordObj: {},
    type: null,
    select: null,
  });

  /** 批量上传弹窗 */
  const [isShowBatch, setIsShowBatch] = useState<boolean>(false);

  /**头部权限切换*/
  // const switchList: AssetacquisitionManageAPI.IManageTabsSwitchType = useMemo(() => {
  //     return MaterialManageTabSwitch(curRes);
  // }, [curRes]);

  /**切换头部方法*/
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    reloadRequest({ ...params, ...searchValues });
  };

  /**重置方法*/
  const onReset = (reqParams: AssetacquisitionManageAPI.IAssetTableRequestType) => {
    // reloadRequest({ ...reqParams });
  };

  /**搜索方法*/
  const onSearch = (reqParams: AssetacquisitionManageAPI.IAssetTableRequestType) => {
    // reloadRequest({ ...reqParams });
  };

  /**刷新管理页面的办法*/
  const reloadManage = () => {
    // reloadRequest({ ...manageTableParams });
  };

  /**分页方法*/
  const onPageChange = (current: any, pageSize: any, params: any) => {
    // reloadRequest({ pageSize, current, ...params });
  };

  /**Table操作列的事件池*/
  const getTableOperateFuncs: AssetacquisitionManageAPI.IMaterialTableActionType = {
    /**详情按钮*/
    onView(record) {
      setIsShowDetail({
        isShow: true,
        recordObj: record,
      });
    },
    /**编辑按钮*/
    onEdit(record) {
      setIsShowAddModal({
        isShow: true,
        recordObj: record,
        clickType: 'edit',
      });
    },
    /**作废按钮*/
    onCancel(record) {
      setIsShowCancelModal({
        isShow: true,
        recordObj: record,
      });
    },
    /**发布*/
    onPublish(record) {
      setIsShowApplyModal({
        isShow: true,
        recordObj: record,
        type: 'publish',
      });
    },
    /**申请*/
    onApply(record) {
      setIsShowApplyModal({
        isShow: true,
        recordObj: record,
        type: 'apply',
        select: 'id',
      });
    },
  };

  /**Table的columns集合*/
  const getTableColumn: Record<string, any>[] = useMemo(() => {
    return getTableColumns(curRes, getTableOperateFuncs);
  }, [curRes]);

  /**新增操作按钮*/
  const actionList: AssetacquisitionManageAPI.IActionList = useMemo(() => {
    return [
      // {
      //   title: '添加',
      //   visible: true,
      //   type: 'primary',
      //   icon: <PlusOutlined />,
      //   onClick: () => {
      //     setIsShowAddModal({
      //       isShow: true,
      //       recordObj: {},
      //       clickType: 'add',
      //     });
      //   },
      // },
    ];
  }, [curRes]);

  return (
    <>
      <div
        id={'custom-preview-container'}
        style={{
          position: 'relative',
          overflow: 'hidden',
          height: '100%',
          width: '100%',
        }}
      >
        <SchemaManage
          ref={MaterialManageViewRef}
          searchProps={{
            switchList: [], //头部切换列表
            searchList,
            onSwitch,
            onReset,
            onSearch,
          }}
          actionList={actionList}
          tableProps={{
            columns: getTableColumn,
            dataSource: array, //mockData
            rowKey: 'id',
            loading: loading,
            pagination: pagination as any,
            onPageChange: onPageChange,
          }}
        />

        {/* 新增编辑弹窗 */}
        {isShowAddModal?.isShow && (
          <UpdataMaterialModal
            curRes={curRes}
            onClose={() => {
              setIsShowAddModal({
                isShow: false,
                recordObj: {},
                clickType: '',
              });
            }}
            checkRows={isShowAddModal?.recordObj}
            isShowModal={isShowAddModal?.isShow}
            reloadManage={reloadManage}
          />
        )}
      </div>
    </>
  );
};

export default AssetAcquisitionManageView;

// export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
//     curRes: baseLogin?.permissions,
//     navTab
// }))(ExpertsManageView);
